import 'package:flutter/material.dart';
import 'package:flutter_eve_plugin/model/health/sys_health_property.dart';
import 'package:flutter_eve_plugin/pages/health/actions.dart';
import 'package:flutter_eve_plugin/route/main.dart';
import 'package:flutter_eve_plugin/store/main.dart';
import 'package:flutter_eve_plugin/store_vm/app_vm.dart';
import 'package:flutter_eve_plugin/store_vm/health/main.dart';
import 'package:flutter_eve_plugin/utils/image_util.dart';
import 'package:flutter_eve_plugin/utils/screen_util.dart';
import 'package:flutter_redux/flutter_redux.dart';

class MainHeaderListWidget extends StatelessWidget {
  const MainHeaderListWidget({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, AppStateViewModel>(
        converter: (store) => AppStateViewModel(
              state: store.state,
              healthStateViewModel:
                  HealthStateViewModel(pushSysPage: (String sysName) {
                ///设置事件
                int index;
                switch (sysName) {
                  case '呼吸系统':
                    index = 0;
                    break;
                  case '消化系统':
                    index = 1;
                    break;
                  case '运动系统':
                    index = 2;
                    break;
                  case '神经系统':
                    index = 3;
                    break;
                  case '内分泌系统':
                    index = 4;
                    break;
                }
                store.dispatch(healthSysCurrPage(store, index));
                Navigator.pushNamed(context, RouteConstant.SysStateMainPage);
              }),
            ),
        builder: (context, vm) {
          return statelessWidget(vm);
        });
  }

  Widget statelessWidget(AppStateViewModel vm) {
    var list = buildillList(vm);
    if (list.length <= 0) {
      ///易生病
      if (vm.state.headlthState.propertyHealthModel.illStatus == 1) {
        return Center(
            child: Container(
                height: setRatio(55),
                width: setRatio(128),
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage(
                        imageUtilHuPo('health/icon_easy_sick_btn_bg@2x')),
                    alignment: Alignment.topCenter,
                    fit: BoxFit.cover,
                  ),
                ),
                child: Center(
                  child: Text(
                    '容易生病体质',
                    style:
                        TextStyle(color: Colors.white, fontSize: setTextSp(15)),
                  ),
                )));
      } else if (vm.state.headlthState.propertyHealthModel.illStatus == 0) {
        return Center(
            child: Container(
                height: setRatio(55),
                width: setRatio(128),
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage(
                        imageUtilHuPo('health/icon_health_btn_bg@2x')),
                    alignment: Alignment.topCenter,
                    fit: BoxFit.cover,
                  ),
                ),
                child: Center(
                  child: Text(
                    '各系统健康',
                    style:
                        TextStyle(color: Colors.white, fontSize: setTextSp(15)),
                  ),
                )));
      }
    } else {
      return ListView.builder(
          physics: BouncingScrollPhysics(),
          itemCount: list.length,
          itemBuilder: (BuildContext context, int index) {
            PropertyHealthDataInfo info = list[index];
            int pross = (info.illValue / 5).ceil();
            return Container(
              height: setRatio(77),
              padding: EdgeInsets.only(left: setRatio(13), right: setRatio(13)),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  GestureDetector(
                    onTap: () {
                      vm.healthStateViewModel.pushSysPage(info.healthSystem);
                    },
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        Container(
                          decoration: BoxDecoration(
                            image: DecorationImage(
                              image: AssetImage(
                                  imageUtilHuPo('health/icon_sick_btn_bg@2x')),
                              alignment: Alignment.topCenter,
                              fit: BoxFit.cover,
                            ),
                          ),
                          height: setRatio(20),
                          width: setRatio(95),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: <Widget>[
                              Text(
                                info.illnessName,
                                style: TextStyle(
                                    color: Color(0xFFFFFFFF),
                                    fontSize: setTextSp(11)),
                              ),
                              SizedBox(
                                width: setRatio(6),
                              ),
                              buildImage(info),
                            ],
                          ),
                        ),
                        SizedBox(
                          width: setRatio(6),
                        ),
                        Text(
                          '(${info.healthSystem})',
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                              color: Color(0xFFFFFFFF),
                              fontSize: setTextSp(11)),
                        ),
                        Expanded(child: Container()),
                        Image.asset(
                          imageUtilHuPo('health/icon_more_arrow@2x'),
                          width: setRatio(10),
                          height: setRatio(15),
                        )
                      ],
                    ),
                  ),
                  SizedBox(
                    height: setRatio(12),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Text(
                        '疾病值',
                        style: TextStyle(
                            color: Color(0xFFFFFFFF), fontSize: setTextSp(10)),
                      ),
                      SizedBox(
                        width: setRatio(2),
                      ),
                      Container(
                          height: setRatio(12),
                          width: setRatio(32),
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(setRatio(6)),
                              color: Color(0xFFFFFFFF)),
                          child: Center(
                            child: Text(
                              '$pross%',
                              style: TextStyle(
                                  color: prossColor(info),
                                  fontSize: setTextSp(10)),
                            ),
                          ))
                    ],
                  ),
                  SizedBox(
                    height: setRatio(6),
                  ),
                  Stack(
                    children: <Widget>[
                      Container(
                        width: setRatio(180),
                        height: setRatio(3),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(setRatio(2)),
                          color: Color.fromRGBO(255, 255, 255, 0.14),
                        ),
                      ),
                      Container(
                        width: setRatio(180 * pross / 100),
                        height: setRatio(3),
                        decoration: boxDecoration(info),
                      ),
                    ],
                  )
                ],
              ),
            );
          });
    }
    return Container();
  }

  Color prossColor(PropertyHealthDataInfo info) {
    switch (info.healthGrade) {
      case 0:
      case 1:
        return Color.fromRGBO(255, 118, 166, 1);
      case 2:
        return Color(0xFFFFA312);
      case 3:
        return Color(0xFFFF76A6);
    }
    return Color(0xFFFF76A6);
  }

  BoxDecoration boxDecoration(PropertyHealthDataInfo info) {
    switch (info.healthGrade) {
      case 0:
      case 1:
        return BoxDecoration(
            borderRadius: BorderRadius.circular(setRatio(2)),
            gradient: LinearGradient(
              colors: [
                Color.fromRGBO(255, 118, 166, 1),
                Color.fromRGBO(255, 95, 151, 1),
              ],
              begin: Alignment.centerLeft,
              end: Alignment.centerRight,
            ),
            boxShadow: [
              BoxShadow(
                color: const Color.fromRGBO(255, 95, 151, 1),
                offset: Offset(0.0, 1.0),
                blurRadius: 1.0,
              ),
            ]);
      case 2:
        return BoxDecoration(
            borderRadius: BorderRadius.circular(setRatio(2)),
            gradient: LinearGradient(
              colors: [
                Color(0xFFF4BC35),
                Color(0xFFF6B720),
              ],
              begin: Alignment.centerLeft,
              end: Alignment.centerRight,
            ),
            boxShadow: [
              BoxShadow(
                color: const Color(0xFFF4BC35),
                offset: Offset(0.0, 1.0),
                blurRadius: 1.0,
              ),
            ]);
      case 3:
        return BoxDecoration(
            borderRadius: BorderRadius.circular(setRatio(2)),
            gradient: LinearGradient(
              colors: [
                Color(0xFFFF76A6),
                Color(0xFFFF5F97),
              ],
              begin: Alignment.centerLeft,
              end: Alignment.centerRight,
            ),
            boxShadow: [
              BoxShadow(
                color: const Color(0xFFFF76A6),
                offset: Offset(0.0, 1.0),
                blurRadius: 1.0,
              ),
            ]);
    }
    return BoxDecoration();
  }

  Widget buildImage(PropertyHealthDataInfo info) {
    if (info.healthGrade == 3) {
      return Image.asset(
        imageUtilHuPo('health/icon_sick_warning@2x'),
        width: setRatio(12),
        height: setRatio(12),
      );
    }
    return SizedBox(
      width: 0,
      height: 0,
    );
  }

  List<PropertyHealthDataInfo> buildillList(AppStateViewModel vm) {
    var list = vm.state.headlthState.propertyHealthModel.propertyHealthData
        ?.where((item) {
      return item.healthGrade >= 2;
    })?.toList();
    if (list == null || list.isEmpty) {
      return [];
    }
    return list;
  }
}
